<!DOCTYPE html>
<head>
    <title>我的第四个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <h1>列表渲染</h1>
    <ul id="example-1">
        <!-- items 是源数据数组，而 item 则是被迭代的数组元素的别名。 -->
        <li v-for="item in items" :key="item.message">
            {{item.message}}
        </li>
    </ul>

    <br/>

    <ul id="example-2">
        <!--  v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
        你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
         <li v-for="item of items" :key="item.message">
        -->
        <li v-for="(item,index) in items">
            {{parentMessage}} - {{index}} - {{item.message}}
        </li>
    </ul>
    <br/><br/>
    <p>----------------------在 v-for 里使用对象---------------------------</p>
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{value}}
        </li>
    </ul>

    <ul id="v-for-object2" class="demo">
        <!--  v-for表达式是value,key  ，列表显示时是key-value -->
        <li v-for="(value,name) in object">
            {{name}}:{{value}}
        </li>
    </ul>

    <br/><br/>
    <div id="d1">
        <li v-for="n in evenNumbers">{{n}}</li>
    </div>
   
    <p>----------------------双层for循环---------------------------</p>
    <br/><br/>
    <div id="d2">
        <ul v-for="set in sets">
            <li v-for="n in even(set)">{{n}}</li>
        </ul>
    </div>
    <br/><br/>
    <p>----------------------template上使用v-for---------------------------</p>

    <ul>
        <template v-for="item in items">
          <li>{{ item.msg }}</li>
          <li class="divider" role="presentation"></li>
        </template>
      </ul>
      <br/><br/>


      <p>----------------------v-for 与v-if一同使用---------------------------</p>
      <div id="d3">
        <li v-for="todo in todos" v-if="!todo.isComplete">
            {{todo.name}}
          </li>
      </div>
      <br/><br/>


      <p>---------------------- template里面使用v-for---------------------------</p>
      <my-component
      v-for="(item, index) in items"
      v-bind:item="item"
      v-bind:index="index"
      v-bind:key="item.id"
    ></my-component>

    <br/><br/>
    <p>---------------------- 组件上使用v-for  ---------------------------</p>
    <div id ="todo-list-example">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat"/>
            <button>Add</button>
        </form>
        <ul>
            <!-- 去掉v-bind:title="todo.tile" 不显示title了，去掉v-bind:key="todo.id"  依然可以删除
            v-bind 绑定dom元素的属性(attribute)
            <li is 中的is是固定写法
            -->
            <li is="todo-item"
             v-for="(todo,index) in todos" 
             v-bind:key="todo.id" 
             v-bind:title="todo.title" 
             v-on:remove="todos.splice(index,1)">
            </li>
        </ul>
    </div>

</body>
<script>
    var example1 = new Vue({
        el:"#example-1",
        data:{
            items:[
                {message:'Foo'},
                {message:'Bar'}
            ]
        }
    })
    /**
     * 变更方法
     * Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()

    替换数组

    变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，
    例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
    example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
    })
    */
    example1.items.push({message:"haha"})

    var example2 = new Vue({
        el:'#example-2',
        data:{
            parentMessage:'Parent',
            items:[
                {message:'Foo'},
                {message:'Bar'}
            ]
        }
    })

    
    var example2 = new Vue({
        el:'#v-for-object',
        data:{
           object:{
            title:'it is me',
            author:'it is you',
            publish:'today'
           }
        }
    })

    var example3 = new Vue({
        el:'#v-for-object2',
        data:{
           object:{
            title:'it is me',
            author:'it is you',
            publish:'today'
           }
        }
    })
    //单层for循环过滤
    var vm1 = new Vue({
        el:'#d1',
        data:{
            numbers:[1,2,3,4]
        },
        computed:{
            //computed定义了一个变量evenNumbers，这个变量获取由后面的function产生，通过this来获取本vue对象的属性
            evenNumbers: function(){
                return this.numbers.filter(function(number){
                    return number%2 === 0 
                })
            }
        }
    })

    //2层for循环过滤
    var vm21 = new Vue({
        el:'#d2',
        data:{
            sets:[[1,2,3,4],[6,7,8,9]]
        },
        methods:{
              //methods定义了一个变量even，这个变量获取由后面的function产生，num是第二层循环传进来的
            even: function(num){
                return num.filter(function(nu){
                    return nu % 2 === 0
                })
            }
        }
    })

    
    //v-for和v-if使用
    var vm21 = new Vue({
        el:'#d3',
        data:{
            todos:[
                {isComplete:true,name:"haha"},
                {isComplete:false,name:"sky"}
            ]
        },
    })


    //组件上使用v-for
    //props 定义了向组件的自定义的attribute，当一个值传递给一个prop attribute的时候，它就变成了那个组件实例的一个property，
    //下面这个props是向组件的title传递值，我屏蔽掉props的时候，页面上只剩下了按钮，屏蔽Vue.component，就没有了列表了，可见Vue.component生成了原来的列表
    //vm.$emit( event, arg ) //触发当前实例上的事件 $emit(\'remove\') 触发remove事件
    //v-on:remove="todos.splice(index,1)  todos.splice(index,len,[item]) 替换、删除、添加数组内某一个值或者几个值，todos.splice(index,1) 删除起始下表index,长度为1的一个值
    Vue.component('todo-item',{
        template: '\<li>{{ title }}<button v-on:click="$emit(\'remove\')">Remove</button></li>'
        ,props:['title']
    })
    var vm21 = new Vue({
        el:'#todo-list-example',
        data:{
            newTodoText:'',
            todos:[
                { id:1,title:'文明的起源'},
                { id:2,title:'古埃及文明'},
                { id:3,title:'中华文明'}
            ],
            nextTodoId:4
        },
        methods:{
            addNewTodo:function(){
               this.todos.push({id:this.nextTodoId++,title:this.newTodoText})
               this.newTodoText = '' 
            }
        }
    })
</script>

</html>